<template>
	<view  class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					我的关注
				<view  class="loa_hui" @tap="huishou()">{{tpzuo}}</view>
			</view>
		</view>
		</view>
		<view class="" v-if="show">
			<view class="item_ul">	
				<view class="item_li" v-for="(shop,index) in shop">
					<view class="item_li_left_left" v-show="radis">
	<!-- 每项选择 -->
	<checkbox-group name="check" @change="changeCheck" class="check">
		<!-- 注意v-for不要设在checkbox-group上 -->
		<label v-for="(item, index) in content" :key="item.id">
			<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.95)" color="#ff80c0"/>
		</label>
	</checkbox-group>
					</view>
					<view class="item_li_left">
						<image :src="shop.src" mode="widthFix"></image>
					</view>
					<navigator class="item_li_right" hover-class="none" url="../goods/detail">
						<view class="item_li_right_tp">
							{{shop.title}}
						</view>
						<view class="item_li_right_bt">
							<view class="newmoney">￥{{shop.newmoney}}</view>
							<view class="oldmoney">￥{{shop.oldmoney}}</view>
						</view>
					</navigator>
				</view>
			</view>
				
		<view class="jie" v-show="radis">
			<view class="jie_left">
				<!-- 全选 -->
						<checkbox-group name="allCheck" @change="changeAll">
							<label>
								<checkbox :value="allCheck.value" :checked="allCheck.checked" style="transform:scale(0.95)" color="#ff80c0"/><text>{{allCheck.name}}</text>
							</label>
						</checkbox-group>
			</view>
			<view class="jie_right">
				删除
			</view>
		</view>
		</view>
		
		<view v-else class="dks">
			<image src="../../static/cvb.png" class="cvb_img" mode="widthFix"></image>
			<view class="as">您还没有关注任何商品，何不现在就去逛逛~</view>
			<navigator class="dl" hover-class="none" url="../index/index" open-type="switchTab">
				去逛逛吧~
			</navigator>
		</view>
	<!-- 侧边栏 -->
	<fixce></fixce> 
	<!-- 回到顶部start -->
	<view class="top" :style="{'display':(topState===true? 'block':'none')}">
	<image src="../../static/huitop.png" class="huitop"
	@tap="top()">
	</view>
	</image>
		<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
					allCheck : {
									name : '全选',
									value : 'all',
									checked : false	
								},
									content : [
													{
														value : '《某天成为公主》',
														id : 1,
														whether : true
													},
													{
														value : '《当神不让》',
														id : 2,
														whether : true
													}
												],
				topState:false,
				show:true, //为false为无关注商品
				tpzuo:'编辑',
				radis:false, //控制单选按钮
				current: -1,
				tpzuoactive:true,
				shop:[  //商品合集
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:'22.80',
					oldmoney:'39.00'
					},
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:'22.80',
					oldmoney:'39.00'
					}
				],
			}
			},
			// 回到顶部start
			onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
			        this.topState = true
			    }else{ //当距离小于200时关闭回到顶部按钮
			        this.topState = false
			    }
			},
			// 回到顶部end
			methods:{
				    // 全选
							changeAll : function(e) {
								if(e.detail.value.length == 0) {
									this.content.map(item => this.$set(item, 'checked', false));
									this.$set(this.allCheck, 'checked', false);
								}else{
									this.content.map(item => this.$set(item, 'checked', true));
									this.$set(this.allCheck, 'checked', true);
								}
							},
							// 多选
							changeCheck : function(e) {
								var items = this.content;
								var len = this.content.length;
								var values = e.detail.value;
								// console.log(values)
								for(var i = 0; i < len; i++) {
									var item = items[i];
									if(values.includes(item.value)){
										this.$set(item, 'checked', true);
									}else{
										this.$set(item, 'checked', false);
									}
								}
								// 判断选中状态
								var arr = [];
								this.content.forEach(item => item.whether == true ? arr.push(item) : '');
								var isAll = arr.every(item => item.checked == true);
								isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)
							},
				top() { //回到顶部
				　　　　uni.pageScrollTo({ 
				　　　　　　scrollTop: 0, duration: 300 
				　　　　}); 
				　　},
				back (){
					uni.switchTab({
					    url: './member'
					});
				},
				huishou(){
					if(this.tpzuoactive){
						this.tpzuo='完成';
						this.tpzuoactive=false;
						this.radis=true;
					}else{
						this.tpzuo='编辑';
						this.tpzuoactive=true;
						this.radis=false;
					}
				},
			
			
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.dks{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
		padding-top:200rpx;
	}
	.cvb_img{
		width:150rpx;
	}
	.as{
		width:100%;
		text-align: center;
		margin:50rpx 0;
		color:#ccc;
	}
	.dl{
		display: inline;
		padding:10rpx 20rpx;
		border:2rpx solid #666;
		color:#666;
		border-radius: 10rpx;
	}
	.item_ul{
		width:100%;
		background-color: #fff;
	}
	.item_li{
		width:90%;
		margin:0 auto;
		padding:20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_li_left_left{
		width:13%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.item_li_left{
		width:30%;
		display: flex;
		justify-content: flex-start;
		align-items: center
	}
	.item_li_left image{
		width:80%;
	}
	.item_li_right{
		width:70%;
	}
	.item_li_right_tp{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    white-space: normal;
	}
	.item_li_right_bt{
		margin-top:15rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.newmoney{
		color: #ff80c0;
		margin-right:15rpx;
		font-size:33rpx;
	}
	.oldmoney{
		font-size:30rpx;
		text-decoration: line-through;
		color:#666;
	}
	uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
		border-color:rgb(255, 128, 192);
	}
	.jie{
		width:100%;
		height:100rpx;
		background-color: #fff;
		position: fixed;
		bottom:0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.jie_left{
		display: flex;
		align-items: center;
		text-indent: 20rpx;
	}
	.jie_right{
		 padding:0 50rpx;
		 background: #ff80c0;
		 color:#fff;
		 display: flex;
		 align-items: center;
		 justify-content: space-around;
		 height:100%;
		 font-size:31rpx;
	}
	</style>
